<template>
  <div class="otherAccount">
    <div class="iconBox">
      <i class="iconfont iconwechat"></i>
    </div>
    <div class="desc">
      <div class="name">微信</div>
      <div class="state">未绑定</div>
      <div class="btnBox">
        <button @click="handelBind">点击绑定</button>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="微信登录"
      custom-class="otherAccountBindDialog"
    >
      <div class="codeBox">
        <img :src="require('@/assets/images/codeIcon.png')" />
      </div>
      <div class="tips">
        请使用微信扫描二维码登录
        <span class="refresh">刷新</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handelBind() {
      this.dialogVisible = true
    },
  },
}
</script>

<style lang="stylus">
.otherAccount {
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .iconBox {
    i {
      font-size: 80px;
    }
  }

  .desc {
    margin-left: 10px;

    .name {
      font-family: Segoe UI;
      font-size: 18px;
      color: #8b8b8b;
    }

    .state {
      font-family: Segoe UI;
      font-size: 12px;
      color: rgba(247, 6, 6, 0.66);
    }

    .btnBox {
      button {
        cursor: pointer;
        outline: none;
        width: 76px;
        height: 24px;
        border: solid 1px #d6d2d2;
        background: #fff;
        font-family: Segoe UI;
        font-size: 14px;
        color: #8b8b8b;
      }
    }
  }

  .el-dialog__wrapper {
    .otherAccountBindDialog {
      max-width: 400px;
      height: 300px;
      background-color: #ffffff;
      border-radius: 10px;
      border: solid 1px #f7f2f2;

      .el-dialog__header {
        text-align: center;

        .el-dialog__title {
          font-family: Segoe UI;
          font-weight: bold;
          font-size: 22px;
          color: #0f0f0f;
        }

        .el-dialog__headerbtn {
          .el-dialog__close {
            font-size: 22px;
            color: #2C89C8;
          }
        }
      }

      .el-dialog__body {
        padding: 0;
        text-align: center;

        .codeBox {
          margin: 0 auto;
          margin-top: 15px;
          width: 150px;
          height: 150px;

          img {
            width: 150px;
            height: 150px;
          }
        }

        .tips {
          margin: 21px auto 0;
          position: relative;
          display: inline-block;
          text-align: center;
          font-family: Segoe UI;
          font-size: 14px;
          color: #0f0f0f;

          .refresh {
            cursor pointer
            position: absolute;
            top: 1px;
            right: -48px;
            font-family: Segoe UI;
            text-decoration: underline;
            font-size: 12px;
            color: rgba(68, 69, 70, 0.51);
          }
        }
      }
    }
  }
}
</style>